<template>
	<!-- 当前是纯积分支付或者纯微信支付，暂不支持组合支付，等后端有空联调对接下 -->
	<view class="point-shop-view">
		<up-navbar title="" @leftClick="leftClick" :autoBack="false" :bgColor='bgColor' :placeholder='true'></up-navbar>
		<view class="h-20"></view>
		<view class="chxy-row-bt h-120" style="z-index: 2;position: relative;">
			<view class="chxy-row">
				<view class="m-0-24">
					<up-image v-if="userModal.attachment" :src="userModal.attachment" width="120rpx" height="120rpx"
						shape="circle" :lazy-load="true"></up-image>
					<up-image v-else src="https://oss.jtmckj.com/wmp/images/common/i_default_avatar.png" width="120rpx"
						height="120rpx" shape="circle" :lazy-load="true"></up-image>
				</view>
				<view class="wx-view">
					<view class="wx-name">{{userModal.name ||'暂无'}}</view>
					<view v-if="userModal.isPayCard === '1'" class="wx-vip">权益会员</view>
				</view>
			</view>
			<view class="jf-rules chxy-row-c-c" @click="showPop = true">
				<view>积分规则</view>
				<up-icon name="arrow-right" color="#141414" size="16"></up-icon>
			</view>
		</view>
		<view class="h-40"></view>
		<view class="chxy-row-arr jf-view" style="z-index: 2;position: relative;">
			<view class="jf-item" @click="toScore">
				<view class="jf-name">积分</view>
				<view class="jf-spc"></view>
				<view class="jf-code">{{userModal.currentPoint || 0 }}</view>
			</view>
			<view class="spc-line"></view>
			<view class="jf-item" @click="toOrder">
				<view class="jf-name">我的订单</view>
				<view class="jf-spc"></view>
				<view class="jf-jl chxy-row-c-c">
					<view style="margin-left: 4rpx;">兑换记录</view>
					<up-icon name="arrow-right" color="#999" size="12" top="1"></up-icon>
				</view>
			</view>
			<view class="spc-line"></view>
			<!-- 	<view class="jf-item" @click="daySign">
				<view class="jf-name">每日签到</view>
				<view class="jf-spc"></view>
				<view class="jf-jl chxy-row">
					去签到
					<up-icon name="arrow-right" color="#999" size="12" top="1"></up-icon>
				</view>
			</view> -->
			<view class="jf-item" @click="daySign">
				<view class="jf-name">优惠券</view>
				<view class="jf-spc"></view>
				<view class="jf-jl chxy-row">
					优惠券
					<up-icon name="arrow-right" color="#999" size="12" top="1"></up-icon>
				</view>
			</view>
		</view>

		<view class="h-40"> </view>

		<!-- 商品类型tabs -->
		<view style="padding: 0 10rpx;background-color: #F2F2F2;z-index: 2;position: relative;">
			<up-tabs :list="typeList" @change="tabsChange" lineHeight="2" :current="tabsCurrent" lineColor="#FF6A00"
				:inactiveStyle="{ color: '#666666',  transform: 'scale(1.07)' }"
				:activeStyle="{ color: '#FF6A00', transform: 'scale(1.10)' }"></up-tabs>
		</view>

		<!-- 商品card列表 -->
		<view class="card-view">
			<mescroll-body @init="mescrollInit" @up="upCallback" :down="{isLock: true}" @down="downCallback"
				:up="upOption">
				<up-grid :border="false" col="2">
					<up-grid-item @click="gridupItemClick(item)" v-for="(item,index) in goodsList" :key="index"
						:customStyle="{width:342+'rpx',height:530+'rpx',marginRight:18 +'rpx',marginBottom:20 +'rpx',background:'#fff',borderRadius:'20rpx'}">
						<view v-if="item.inventoryQty <= 0" class="ysq-view">
							<view class="ysq-bac">
								<view class="ysq-text">已售罄</view>
							</view>
						</view>
						<image v-if="item.attachment" :src="item.attachment" class="radio-t" mode="aspectFill"
							:class="item.inventoryQty <= 0 ? 'opt-view':''">
						</image>
						<image v-else src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/goods/goods_defau.png"
							class="radio-t">
						</image>
						<view class="grid-card">
							<view class="item-title">{{item.name}}</view>
							<view class="item-sub-title">{{item.remark}}</view>
							<view class="item-money">
								<text v-if="item.exchangeMoney > 0">{{item.exchangeMoney}}元</text>
							</view>
							<view class="item-jf chxy-row-bt">
								<view class="jf-left chxy-row-ac">
									<view class="">{{item.exchangeScore}}</view>
									<view class="color-666">积分</view>
								</view>
								<view :class="item.inventoryQty <= 0 ? 'jf-but-opt':'jf-but'">兑换</view>
							</view>
						</view>
					</up-grid-item>
				</up-grid>
			</mescroll-body>

		</view>

		<!-- 积分规则  -->
		<up-overlay :show="showPop">
			<view class="chxy-row-c-c" style="height: 100%;width: 100vw;">
				<view class="over-rules">
					<image @click.stop="showPop = false"
						src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/jfsc/home/close.svg"
						style="width: 36rpx;height: 36rpx;position: absolute;right:32rpx ;top: 32rpx;"></image>
					<view class="over-rules-title">积分规则</view>
					<view @tap.stop class="over-rules-desc">
						{{jfDesc}}
					</view>
				</view>
			</view>
		</up-overlay>

	</view>
</template>

<script setup>
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import { onLoad, onReachBottom, onPullDownRefresh, onShow, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { ref, reactive, nextTick } from 'vue';
	import { goodsPublic } from '@/pagesPointShop/api/goods.js';
	import { HFiveMemberAppObjProcess } from '@/api/public.js'
	import { initStatusBarHeight } from "@/until/tools.js"
	import { useUserStore } from '@/store/user.js';
	const store = useUserStore();
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)

	const upOption = ref({
		page: {
			size: 100 // 每页数据的数量,默认10
		}, 
	});

	const tabsCurrent = ref(0);
	const typeList = ref([]);
	const goodsList = ref([]);
	const goodsTotal = ref(0);
	const showPop = ref(false);
	const bgColor = ref('transparent');
	const userModal = ref({
		'name': '',
		'isPayCard': '',
		"currentPoint": 0
	});
	const jfDesc = ref(
		'积分（以下简称“积分”）为回馈用户的权益奖励，积分不具有货币或现金价值，不可兑现，不可转让。用户可以通过支付、签到、积分奖励活动等方式来获取积分，积分可以在积分商城处兑换各类权益、参与各种积分活动等，具体以权益兑换及活动页面展示为准。'
	);
	const orgCode = uni.getStorageSync('shopInfo').orgCode
	const speType = ref(false)
	onLoad((options) => {
		//
		console.log(options);
		if(options.typeSpe == '1'){
			speType.value = true
		}
	});

	onShow(() => {
		// 每次都需要刷新积分信息与积分商品信息
		initData()
	});

	// 每次都需要刷新积分信息与积分商品信息
	const initData = () => {
		initUserInfo()
		
	}

	// 初始化 赋值用户头像昵称
	const initUserInfo = () => {
		let modal = {
			"functionName": "MemberInfo_H5",
			"contentData": {}
		}
		HFiveMemberAppObjProcess(modal).then(res => {
			// console.log(JSON.stringify(res.data));
			// console.log(JSON.parse(res.data));
			// let result = JSON.parse(res.data)
			console.log(res);
			// let result = res
			// console.log('result:', result)
			
			let result = []
			if(Array.isArray(res)){
				result = res
			}else{
				result = JSON.parse(res.data)
			}    
			userModal.value = result.find(item => item.cardType == 2)    
			uni.setStorageSync('pointUserInfo',userModal.value) 
			
			
			
			// // 类型2 门店卡（当前只做门店卡不做品牌卡，返回的信息必然会有门店卡） 
			// userModal.value = result.find(item => item.cardType == 2)
			// // 临时-- 存储门店卡用户信息
			// uni.setStorageSync('pointUserInfo', userModal.value)
		})
	};

	// 初始化 商品类型 
	const initType = async () => {
		let modal = {
			"functionName": "getMallGoodsType",
			"contentData": ""
		}
		const res = await goodsPublic(modal)
		let filteredRes = []
		let result = {}
		if (orgCode == '0015') {
			if (speType.value) {
				//过滤掉
				result = { 'code': '0015003', "name": '全部' }
				filteredRes = res.content.rowData.filter(item => item.code == '0015003');
				typeList.value = [result, ...filteredRes]
			} else {
				filteredRes = res.content.rowData.filter(item => item.code != '0015003');
				typeList.value = filteredRes
			}
		}else{
			filteredRes = res.content.rowData
			result = { 'code': '', "name": '全部' }
			typeList.value = [result, ...filteredRes]
		}
		
		
		
		
		console.log(typeList.value);
	};

	const tabsChange = (item) => {
		tabsCurrent.value = item.index
		getMescroll().resetUpScroll()
	}

	
	const upCallback = async(mescroll) => {
		await initType()
		getInitInfo(mescroll)
	}
	
	// 初始化 商品列表
	const getInitInfo = (mescroll)=>{
		console.log(typeList.value);
		console.log(tabsCurrent.value);
		let type = typeList.value[tabsCurrent.value]?.code || ''
		let modal = {
			"functionName": "getMallGoodsInfo",
			"contentData": {
				"typeCode": type,
				"pageSize": mescroll.size,
				"pageIndex": mescroll.num
			}
		}
		console.log('upCallback', modal)
		goodsPublic(modal).then(res => {
			goodsTotal.value = res.content.count // 总数据量 
			let filteredRes = []
			if (orgCode == '0015') {
				if (speType.value){
					filteredRes = res.content.rowData.filter(item => item.typeCode == '0015003');
				}else{
					filteredRes = res.content.rowData.filter(item => item.typeCode != '0015003');
				}
			} else {
				filteredRes = res.content.rowData
			} 
			const curPageData = filteredRes 
			console.log('curPageData：', curPageData);
			if (mescroll.num == 1) goodsList.value = [];
			goodsList.value = goodsList.value.concat(curPageData);
			// mescroll.endBySize(curPageData.length, goodsTotal.value); // 请求成功, 结束加载
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		}).catch(() => {
			mescroll.endErr();
		})
	}
	
	

	onPageScroll(e => {
		if (e.scrollTop < 20) {
			bgColor.value = 'transparent'
		} else {
			bgColor.value = '#fff'
		}
	});

	const toOrder = () => {
		uni.navigateTo({
			url: '/pagesPointShop/view/order/orderList'
		})
	};

	const toScore = () => {
		uni.navigateTo({
			url: '/pagesPointShop/view/score/scoreHistory'
		})
	};

	// 跳转 商品详细信息
	const gridupItemClick = (item) => {
		if (item.inventoryQty <= 0) {
			return
		}
		uni.navigateTo({
			url: './exchange/details?goodId=' + item.code
		})
	};

	// 上拉加载更多
	// onReachBottom(() => { // loadMore(); console.log('onReachBottom...') });

	// //下拉刷新
	onPullDownRefresh(() => {
		console.log('onPullDownRefresh...')
		uni.showNavigationBarLoading();
		nextTick(() => {
			initData()
			getMescroll().resetUpScroll()
			// uni.hideNavigationBarLoading();
			// uni.stopPullDownRefresh()
		})
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	});

	// 
	const daySign = () => {
		uni.reLaunch({
			url: '/pages/coupon/index'
		})

		// uni.navigateTo({
		// 	url: '/subpkg/view/activitySign/activitySign'
		// }) 
	};

	const leftClick = () => {
		console.log('leftClick');
		const pages = getCurrentPages();
		console.log(pages);
		if (pages.length > 1) {
			uni.navigateBack();
		} else {
			uni.reLaunch({
				url: '/pages/home/index'
			})
		}
	};
</script>

<style scoped lang="scss">
	:root {
		--bac-color: #F2F2F2;
		--bac-pri-color: #FF6A00;
		--bac-sec-color: #FF5500;
	}

	.point-shop-view {
		position: relative;
		width: 100vw;
		background-color: #F2F2F2;
	}

	.content-gradient-bac {
		position: absolute;
		background: linear-gradient(0deg, #F2F2F2, #FFE9D9);
		width: 100vw;
		height: 580rpx;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.h-top-fix {
		height: 180rpx;
		width: 100vw;
	}

	.card-view {
		padding: 24rpx 6rpx 24rpx 24rpx;
		background-color: #F2F2F2;
	}

	.color-666 {
		color: #666666;
	}

	.wx-view {
		.wx-name {
			margin-top: 16rpx;
			margin-bottom: 18rpx;
			height: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #212121;
			line-height: 30rpx;
		}

		.wx-vip {
			width: 144rpx;
			height: 48rpx;
			background: linear-gradient(-75deg, #FF5500, #FFBF00);
			border-radius: 24rpx;
			/* width: 93rpx; */
			/* height: 23rpx; */
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFDE5;
			line-height: 48rpx;
			text-align: center;
		}
	}

	.jf-rules {
		width: 188rpx;
		height: 58rpx;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		border: 2rpx solid #212121;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
		line-height: 58rpx;
	}

	.jf-view {
		height: 120rpx;
		background-color: #FFFFFF;
		width: 702rpx;
		margin: 0 24rpx;
		border-radius: 16rpx;

		.jf-item {
			width: 190rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.jf-name {
				/* width: 54rpx; */
				/* height: 27rpx; */
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx !important;
				color: #212121;
				/* line-height: 48rpx; */
			}

			.jf-spc {
				height: 10rpx;
			}

			.jf-code {
				width: 81rpx;
				/* height: 21rpx; */
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FF3333;
				text-align: center;
				/* line-height: 48rpx; */
			}

			.jf-jl {
				/* width: 94rpx; */
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-right: 4rpx;
				/* background-color: aquamarine; */
				/* line-height: 48rpx; */
			}
		}

		.spc-line {
			width: 2rpx;
			height: 48rpx;
			background: #E6E6E6;
		}
	}

	.grid-card {
		height: 188rpx;
		width: calc(100% - 32rpx);
		margin: 0 16rpx;
	}

	.over-rules {
		position: relative;
		width: 505rpx;
		height: 484rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 60rpx 48rpx 40rpx 48rpx;

		.over-rules-title {
			text-align: center;
			height: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #212121;
			line-height: 30rpx;
			margin-bottom: 47rpx;
		}

		.over-rules-desc {
			width: 505rpx;
			height: 384rpx;
			/* overflow-y: scroll; */
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			line-height: 56rpx;
		}
	}

	.item-title {
		width: 100%;
		height: 31rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #212121;
		line-height: 30rpx;
		margin: 15rpx 0 11rpx 0;
	}

	.item-sub-title {
		width: 100%; // width: 210rpx;  
		height: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		line-height: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.item-money {
		height: 20rpx;
		font-family: PingFang SC;
		margin-top: 6rpx;
		margin-bottom: 16rpx;
		font-size: 24rpx;
		color: #FF3333;
	}

	.item-jf {
		margin-top: 8rpx;
		font-size: 24rpx;
		color: #FF6A00;
	}

	.radio-t {
		width: 342rpx;
		height: 342rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.opt-view {
		opacity: 0.5;
	}

	.ysq-view {
		top: 0;
		left: 0;
		position: absolute;
		opacity: 0.5;
		z-index: 1;
		width: 342rpx;
		height: 342rpx;

		.ysq-bac {
			background: #000000;
			border-radius: 8rpx;
			border: 2px solid #FFFFFF;
			opacity: 0.5;
			width: 120rpx;
			height: 60rpx;
			position: absolute;
			z-index: 7;
			top: 131rpx;
			left: 111rpx;

			.ysq-text {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #FFFFFF;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 8;
				font-weight: 500;
				font-size: 32rpx;
			}
		}
	}


	.jf-but {
		text-align: center;
		width: 80rpx;
		height: 40rpx;
		background: #FF6A00;
		border-radius: 8rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.jf-but-opt {
		text-align: center;
		width: 80rpx;
		height: 40rpx;
		background: #FF6A00;
		opacity: 0.4;
		border-radius: 8rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
</style>